<template>
  <div v-loading="listLoading" style="min-height: 100px;">
    <u-table
      v-if="list.items.length > 0"
      ref="chargeRecordTable"
      :data="list.items"
      :height="tableHeight"
      :row-height="49"
      :border="false"
      :row-class-name="tableRowClassName"
      use-virtual
      row-key="id"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row
      @select="selectTable"
      @select-all="selectTable"
      @sort-change="sortMethod">
      <u-table-column
        :reserve-selection="true"
        align="center"
        fixed="left"
        type="selection"
        width="50" />
      <u-table-column align="left" label="订单编号" min-width="190">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.orderId" is-can-click @handelClick="openOrderDetail(scope.row)" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="订单封账月份" min-width="130" prop="sealMonth" sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.sealMonth || '--' }}
        </template>
      </u-table-column>
      <u-table-column align="left" label="下单日期" min-width="110" prop="placeOrderStart" sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.placeOrderDate | format('YYYY/MM/DD') }}
        </template>
      </u-table-column>
      <u-table-column align="left" label="客户名称" min-width="140">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.clientName" />
        </template>
      </u-table-column>
      <u-table-column align="right" label="含税金额(元)" min-width="110" prop="amount">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.taxAmount" :price="scope.row.taxAmount / 100" />
        </template>
      </u-table-column>
      <u-table-column align="right" label="核销金额(元)" min-width="130" prop="enterAccountAmount" sortable="custom">
        <template slot-scope="scope">
          <div class="flex" style="justify-content: flex-end">
            <span v-if="scope.row.isLoseEfficacy === 1" style="color: #E54C4C;">(已重置)</span>
            <PriceColumn :real-val="scope.row.enterAccountAmount" :price="scope.row.enterAccountAmount / 100" />
          </div>
        </template>
      </u-table-column>
      <u-table-column align="left" label="付款人名称" min-width="110">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.payer" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="到账日期" width="110" prop="intoAccountDate" sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.intoAccountDate | format('YYYY/MM/DD') }}
        </template>
      </u-table-column>
      <u-table-column align="left" label="核销日期" width="110" prop="chargeDate" sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.chargeDate | format('YYYY/MM/DD') }}
        </template>
      </u-table-column>
      <u-table-column align="left" label="流水单号" min-width="170">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.flowId" is-can-click @handelClick="openFlowDetail(scope.row)" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="核销编号" min-width="160">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.verificationId" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="付款方式" min-width="110">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.payMethodName" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="付款账号" min-width="150">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.payAccount" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="交易单号" min-width="150">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.trasactionId" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="流水创建人员" min-width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.flowCreater" />
        </template>
      </u-table-column>
      <u-table-column align="left" label="核销人员" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.charger || '--' }}
        </template>
      </u-table-column>
      <u-table-column align="left" label="封账状态" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.sealStatus | setSealBillType }}
        </template>
      </u-table-column>
      <u-table-column align="left" label="类型" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.flowType | flowType }}
        </template>
      </u-table-column>
      <u-table-column align="left" label="封账月份" min-width="100" prop="sealingMonth">
        <template slot-scope="scope">
          {{ scope.row.sealingMonth || '--' }}
        </template>
      </u-table-column>
    </u-table>
    <empty-placeholder v-else-if="!isInit" style="margin-bottom: 24px" />
  </div>
</template>

<script>
import { format } from '@/filters/date';
import { setSealBillType } from '@/filters/status';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import tableSelections from '@/mixins/tableSelections';
export default {
  name: 'ChargeReportTable',
  components: {
    EmptyPlaceholder
  },
  filters: {
    format,
    setSealBillType,
    flowType(val) {
      // 流水类型。0:普通 1:对抵
      let text = '--';
      switch (val) {
        case 0:
          text = '普通';
          break;
        case 1:
          text = '对抵';
          break;
      }
      return text;
    }
  },
  mixins: [tableSelections],
  props: {
    list: {
      type: Object | Array,
      default: () => ({})
    },
    listLoading: {
      type: Boolean,
      default: false
    },
    tableHeight: {
      type: String,
      default: '100vh'
    },
    isInit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tableRefName: 'chargeRecordTable', // 表格的ref名称
      idKey: 'id', // 唯一表示字段
      isUmyTable: true
    };
  },
  methods: {
    // 选择表格
    tableSelectionChange(e) {
      this.$emit('handleSelectionChange', e);
    },
    sortMethod(a) {
      let sortName = '';
      let sortType = '';
      if (a.order) {
        sortName = a.prop;
        sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.$emit('tableSort', { sortName, sortType });
    },
    openOrderDetail(data) {
      const orderId = data.orderDetailId || '';
      if (!orderId) {
        this.$message.warning('无法获取订单详情信息');
        return;
      }
      const routerData = {
        name: 'orderDetail',
        params: { orderId }
      };
      const url = this.$router.resolve(routerData);
      window.open(url.href, '_blank');
    },
    openFlowDetail(data) {
      const chargeOffId = data.flowDetailId || '';
      if (!chargeOffId) {
        this.$message.warning('无法获取流水详情信息');
        return;
      }
      const routerData = {
        name: 'chargeOffDetail',
        params: { chargeOffId }
      };
      const url = this.$router.resolve(routerData);
      window.open(url.href, '_blank');
    }
  }
};
</script>

<style scoped>

</style>
